<div class="content">
    <div id="example_title">
        <h1>Row Styling</h1>
        You can pass background and text color for the row with each record. The example belows loads data from list2.json file
        that has there formatting settings.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="grid" style="width: 600px; height: 350px;"></div>

<!--CODE-->
<script type="module">
import { w2grid } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid',
    box: '#grid',
    url: 'data/list2.json',
    method: 'GET', // need this to avoid 412 error on Safari
    columns: [
        { field: 'fname', text: 'First Name', size: '200px' },
        { field: 'lname', text: 'Last Name', size: '200px' },
        { field: 'sdate', text: 'Dates', size: '100%', attr: "align=center" }
    ]
})
</script>

<!--CODE-->

<!--CODE-->
{
    "total": 36,
    "header": "50 Greatest Composers of All Times",
    "records": [
        { "recid": 1, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" },
        { "recid": 2, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827" },
        { "recid": 3, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 4, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        { "recid": 5, "fname": "Richard", "lname": "Wagner", "sdate": "1685-1750" },
        { "recid": 6, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" },
        { "recid": 7, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827", "w2ui": { "style": "background-color: #C2F5B4" } ,
        { "recid": 8, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 9, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        { "recid": 10, "fname": "Richard", "lname": "Wagner", "sdate": "1685-1750", "w2ui": { "style": "color: red" } ,
        { "recid": 11, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809", "w2ui": { "style": "background-color: #FBFEC0" } ,
        { "recid": 12, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827" },
        { "recid": 13, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 14, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        { "recid": 15, "fname": "Richard", "lname": "Wagner", "sdate": "1685-1750", "w2ui": { "style": "color: blue" } ,
        { "recid": 16, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" },
        { "recid": 17, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827"},
        { "recid": 18, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 19, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        { "recid": 20, "fname": "Richard", "lname": "Wagner", "sdate": "1685-1750" },
        { "recid": 21, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" },
        { "recid": 22, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827" },
        { "recid": 23, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 24, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        { "recid": 25, "fname": "Richard", "lname": "Wagner", "sdate": "1685-1750", "w2ui": { "style": "color: gray" } ,
        { "recid": 26, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" },
        { "recid": 27, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827"},
        { "recid": 28, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 29, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        { "recid": 30, "fname": "Richard", "lname": "Wagner", "sdate": "1685-1750" },
        { "recid": 31, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" },
        { "recid": 32, "fname": "Ludwig Van", "lname": "Beethoven", "sdate": "1770-1827", w2ui: { "style": "background-color: #C2F5B4" } ,
        { "recid": 33, "fname": "Wolfgang Amadeus", "lname": "Mozart", "sdate": "1756-1791" },
        { "recid": 34, "fname": "Johann Sebastian", "lname": "Bach", "sdate": "1685-1750" },
        { "recid": 35, "fname": "Richard", "lname": "Wagner", "sdate": "1685-1750" },
        { "recid": 36, "fname": "Joseph", "lname": "Haydn", "sdate": "1732-1809" }
    ]
}